// This file is part of Indico.
// Copyright (C) 2002 - 2025 CERN
//
// Indico is free software; you can redistribute it and/or
// modify it under the terms of the MIT License; see the
// LICENSE file for more details.

@use 'base' as *;
@use 'partials/boxes' as *;
@use 'partials/icons' as *;
@use 'partials/labels' as *;

.sortable-list {
  margin-bottom: 10px;

  ul {
    @include i-box-cancel-horizontal-margin();
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 2em;
    list-style-type: none;

    li {
      @extend .flexrow;
      margin: 0;
      padding: 10px;

      &.draggable {
        cursor: move;
      }

      &.i-label {
        text-align: left;
        border-color: transparent;
        transition: color 0s, background-color 0.4s;

        > .title {
          flex-grow: 1;
          margin: 0 0.5em;
        }

        .toggle-enabled {
          cursor: pointer;
        }

        .handle:first-child {
          margin-left: 0;
        }
      }

      .actions,
      .handle {
        color: lighten($i-label-color, 30%);
        transition: color 0.4s;
        flex-shrink: 0;
        align-self: center;
      }

      &:hover,
      &.ui-sortable-helper {
        &.i-label {
          background-color: lighten($i-label-color, 50%);
          transition: color 0s, background-color 0s;
        }

        .actions,
        .handle {
          color: $i-label-color;
          transition: color 0s;
        }
      }

      &.placeholder {
        border: 1px $i-label-color dashed;
      }

      .handle.invisible {
        visibility: hidden;
      }
    }

    &.enabled li .toggle-enabled {
      @include icon-before('icon-eye');
    }

    &.disabled li {
      &:hover:not(.ui-sortable-helper) {
        background: repeating-linear-gradient(
          -40deg,
          lighten($pastel-gray, 0.5 * $color-variation),
          lighten($pastel-gray, 0.5 * $color-variation) 10px,
          lighten($pastel-gray, 0.7 * $color-variation) 10px,
          lighten($pastel-gray, 0.7 * $color-variation) 20px
        );
        background-color: lighten($i-label-color, 50%);
      }

      .toggle-enabled {
        @include icon-before('icon-eye-blocked');
      }

      .icon-settings {
        display: none;
      }
    }
  }

  &.two-columns {
    @extend .flexrow;

    > div {
      flex-grow: 1;

      > .titled-rule {
        @include i-box-titled-rule-header();
      }

      &:first-child ul {
        margin-right: 0;
      }

      &:nth-child(2) {
        border-left: 1px solid $gray;

        ul {
          margin-left: 0;
        }
      }
    }
  }

  &.tiles {
    ul {
      margin: 0;
    }

    li.i-label {
      @include default-border-radius();

      &:not(:last-child) {
        margin-bottom: 5px;
      }

      &:not(.placeholder) {
        @include border-all();
        background-color: $light-gray;
      }
    }
  }
}
